boundingClientRect

Returns the rectangle bounds of the element and its position relative to the top-left of the viewport of the current document.

This method can return a Rect with zero width, height, x, and y if the element has the hidden attribute or the CSS style of the element contains display: none; statement.

The amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the bounding rectangle. This means that the rectangle's boundary edges (top, left, bottom, and right) change their values every time the scrolling position changes (because their values are relative to the viewport and not absolute). If you need the bounding rectangle relative to the top-left corner of the document, just add the current scrolling position to the top and left properties (these can be obtained using window.scrollX and window.scrollY) to get a bounding rectangle which is independent from the current scrolling position.

Throws